<template>

  <div class="toast-wrap" v-if="toast_show">
    <div v-if="mask" class="mask"></div>
    <div  ref="my_toast" class="toast"  role="alert"  aria-live="assertive" aria-atomic="true">
      <div class="toast-header" :class="type">
        <img src="../../assets/icons/favsion.png" style="width: 45px;" class="rounded me-2" alt="...">
        <strong class="me-auto">PASSLINK</strong>
        <small>{{ type }}</small>
        <button type="button" @click="toast_show=!toast_show" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body">
        {{ msg }}
      </div>

    </div>

  </div>
  
</template>

<script setup lang="ts">
import { onMounted, ref, reactive  } from 'vue'
import gsap from 'gsap';
defineProps({
  msg: { type: String },
  type:{type:String},
  mask: { type: Boolean }
})
const toast_show = ref(true);
const my_toast = ref()
const style = reactive({ marginLeft: '0px' })
onMounted(() => {
  style.marginLeft = my_toast.value.clientWidth / 2 * -1 + 'px'
  gsap.to('.toast', { duration: 0.8, bottom: 50, right: 10, ease: "power4.out" });
})


</script>

<style lang="scss" scoped>
@media screen and (max-width: $passlink-media-max-width-5) {
  .toast {
    position: fixed;
    bottom: 50px;
    right: -300px;
    box-sizing: border-box;
    z-index: 9999;
    display: block;
  }
  
}
/* 根据type属性设置不同的背景颜色 */
.success {
  background-color: rgb(83, 255, 83);
}

.error {
  background-color: rgb(255, 92, 92);
}

.warning {
  background-color: rgb(255, 165, 69);
}

.info {
  background-color: rgb(96, 96, 255);
}

.toast-wrap {

  .mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9998;
    background-color: rgba(65, 65, 65,0.6);
  }

  .toast {
    position: fixed;
    bottom: 50px;
    right: -300px;
    box-sizing: border-box;
    z-index: 9999;
    display: block;
  }
}
</style>
